위젯 이벤트 설정 가이드

DashBuilder를 생성할 때 다양한 이벤트 핸들러를 등록하여 사용자 상호작용에 반응할 수 있습니다.

기본 이벤트 구조

const dashboard = DashBuilder.create(container, {
  options: {
    level: 0,
    children: [], // 위젯 목록
  },
  dataSets: [], // 데이터셋 목록
  events: {
    ibsheet: {
      onClick: function(paramObject) {
        // IBSheet 클릭 이벤트 처리
      },
    },
    ibchart: {
      pointClick: function(paramObject) {
        // IBChart 포인트 클릭 이벤트 처리
      },
    },
    ibmap: {
      map: {
        onclick: function(paramObject) {
          // IBMap 맵 클릭 이벤트 처리
        },
      },
      point: {
        onclick: function(paramObject) {
          // IBMap 포인트 클릭 이벤트 처리
        },
      }
    },
    kpi: {
      onClick: function(paramObject) {
        // kpi 위젯 클릭 이벤트 처리
      },
    }
  }
});

주요 이벤트 설명

IBSheet 이벤트

• onClick: 시트의 셀이 클릭될 때 발생하는 이벤트입니다.
  • paramObject에는 클릭된 셀의 행, 열, 값 등의 정보가 포함됩니다.

IBChart 이벤트

• pointClick: 차트의 데이터 포인트(점, 막대 등)가 클릭될 때 발생하는 이벤트입니다.
  • paramObject에는 클릭된 포인트의 시리즈, 카테고리, 값 등의 정보가 포함됩니다.

IBMap 이벤트

• map.onclick: 맵 자체가 클릭될 때 발생하는 이벤트입니다.
  • paramObject에는 클릭된 지도의 좌표, 줌 레벨 등의 정보가 포함됩니다.
• point.onclick: 맵 위의 특정 포인트(마커)가 클릭될 때 발생하는 이벤트입니다.
  • paramObject에는 클릭된 포인트의 ID, 위치, 속성 등의 정보가 포함됩니다.

활용 예시

events: {
  ibchart: {
    pointClick: function(param) {
      // 클릭된 차트 포인트의 데이터를 로그에 출력
      console.log("클릭된 포인트:", param.point);
      console.log("시리즈:", param.series);
      console.log("값:", param.value);
      
      // 클릭된 포인트에 따른 추가 작업 수행
      // 예: 다른 위젯 업데이트, 데이터 필터링 등
    }
  }
}

참고 사항

• 각 이벤트 핸들러의 paramObject 매개변수는 이벤트 유형에 따라 다른 속성을 가집니다.
• 이벤트 핸들러 내에서 this는 기본적으로 이벤트가 발생한 위젯 객체를 참조합니다.
• 복잡한 대시보드의 경우, 위젯 간 상호작용을 위해 이벤트 핸들러를 활용할 수 있습니다.